div.admonition
  border: 0 !important
  border-radius: 8px !important
  padding: 24px !important
  box-shadow: none !important

  &.note, &.tip, &.hint, &.important
    background-color: var(--pst-color-info-bg)

    .admonition-title:after
      background-image: url("../images/icons/info.svg")
      background-color: var(--pst-color-info-icon)

  &.warning, &.caution, &.attention
    background-color: var(--pst-color-warning-bg)

    .admonition-title:after
      background-image: url("../images/icons/warning.svg")
      background-color: var(--pst-color-warning-icon)
  
  &.danger, &.error
    background-color: var(--pst-color-danger-bg)

    .admonition-title:after
      background-image: url("../images/icons/danger.svg")
      background-color: var(--pst-color-danger-icon)

  &.success
    background-color: var(--pst-color-success-bg)

    .admonition-title:after
      background-image: url("../images/icons/success.svg")
      background-color: var(--pst-color-success-icon)

  .admonition-title
    background-color: transparent !important
    line-height: 1.2
    padding-top: 0
    padding-bottom: 10px
    padding-left: 48px
    position: relative

  .admonition-title:after
    content: "" !important
    position: absolute
    left: 0
    top: 0
    width: 32px
    height: 32px
    background-size: 16px
    background-position: center
    background-repeat: no-repeat
    border-radius: 4px

  p.admonition-title~*
    margin-right: 0
    margin-left: 2.4rem

  > ol, > ul
    margin-left: 2em
